<template>
  <div id="bigbox">
    <div id="big">
      <br />
      <div><span id="shuxian">| </span> <span> 数据概况</span></div>

      <div class="status-1">
        <span class="sign-sp">选择日期范围</span>
        <el-date-picker
          v-model="payTime"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
          :picker-options="pickerOptions"
        >
        </el-date-picker>
      </div>
      <br />
      <div id="nr-zhong">
        <br />
        <div id="app">
          <!--为echarts准备一个具备大小的容器dom-->
          <div id="main" style="width: 100%; height: 400px"></div>
        </div>
             
        <button id="exportData">导出</button>
        <br />
        <br />
        <!-- 横列数据 -->
        <div id="data1">
          <el-table style="width: 100%" :data="getValues" :show-header="false">
            <el-table-column
              stripe
              v-for="(item, index) in getHeaders"
              :key="index"
              :prop="item"
            >
            </el-table-column>
          </el-table>
        </div>
      </div>

      <div id="pie">
        <!-- 饼图 -->
        <div class="div-pie">
          <p class="span_one">居民年龄构成</p>
          <PieAnnular
            id="ecahrtIds"
            :colorList="carmColorSystem"
            :dataCon="data"
          />
        </div>
        <div class="div-pie">
          <p class="span_one">居民学历构成</p>
          <PieAnnularTwo
            id="ecahrtIdsTwo"
            :colorList="carmColorSystem"
            :dataCon="data1"
          />
        </div>
        <div class="div-pie">
          <p class="span_one">居民性别构成</p>
          <PieAnnularThree
            id="ecahrtIdsThree"
            :colorList="carmColorSystem"
            :dataCon="data2"
          />
        </div>
        <!-- 横向柱状图 -->
        <div class="div-pie">
         <!-- <div class="echart2" id="mychart2" :style="myChartStyle"></div> -->
         <verbar class="verbar">
        <Echarts2 style="width: 300px; height: 320px; margin-top: 25px; margin-left: 10px;"/>
      </verbar>
        </div>
        <!-- 柱状图 -->
        <div class="div-pie-right">
          <div class="echart" id="mychart" :style="myChartStyle"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import echarts from "echarts";
import PieAnnular from "../common/pie.vue";
import PieAnnularTwo from "../common/pieTwo.vue";
import PieAnnularThree from "../common/pieThree.vue";
import Echarts2 from "../control/echarts2.vue";
import axios from "axios";
const colors = [
  ["rgba(240, 7, 100, 1)", "rgba(0, 215, 229, 1)"],
  ["rgba(240, 7, 100, 1)", "rgba(0, 215, 229, 1)"],
  ["rgba(240, 7, 100, 1)", "rgba(0, 215, 229, 1)"],
  ["rgba(240, 7, 100, 1)", "rgba(0, 215, 229, 1)"],
];
export default {
  components: {
    PieAnnular,
    PieAnnularTwo,
    PieAnnularThree,
    Echarts2
  },

  data() {
    return {
      // 饼图数据
      // coolColorSystem:['#61368f','#284797','#116bb1','#15a8aa','#1da563','#79bc52'],//冷色系
      carmColorSystem: ["#fddb78", "#2984f8", "#3ed59f", "#fa746b", "#666ee8"], //暖色系
      // 通用色系10种
      colorList: [
        "#46a6ff",
        "#42cece",
        "#59ce7c",
        "#fbd643",
        "#f36d83",
        "#9d69e6",
        "#5d5ed2",
        "#4e5b8f",
        "#ffad6a",
        "#ffadcf",
      ],
      list: 0,
      data: [
        //模拟数据
        { value: 100, name: "10岁以下 " },
        { value: 310, name: "10-30岁" },
        { value: 120, name: "30-40岁" },
        { value: 120, name: "40-50岁" },
        { value: 340, name: "50岁以上" },
      ],
      data1: [
        //模拟数据
        { value: 100, name: "小学 " },
        { value: 310, name: "初中" },
        { value: 120, name: "高中" },
        { value: 120, name: "大学" },
        { value: 340, name: "不详" },
      ],
      data2: [
        //模拟数据
        { value: 100, name: "男 " },
        { value: 310, name: "女" },
      ],

      // 柱状图数据
      xData: [
        "老人护理包",
        "基础包1",
        "基础包2",
        "基础包3",
        "基础包4",
        "儿童护理包",
        "高级特需包",
      ], //横坐标
      a: 0, //数据
      yData: [21, 32, 34, 12, 32, 11, 22], //数据
      myChartStyle: { float: "left", width: "100%", height: "400px" }, //图表样式
      minDate: "",
      maxDate: "",
      payTime: [],
      // 折线图数据
      xdata: ["1/4", "1/5", "1/6", "1/7", "1/8", "1/9", "1/10"],
      adata: [22, 223, 211, 156, 245, 136, 93],
      bdata: [12, 123, 213, 14, 232, 176, 217],
      cdata: [24, 222, 110, 240, 211, 92, 122],

      // 表格标题
      headers: [
        {
          prop: "dataType",
          label: "数据类型",
        },

        {
          prop: "addResident",
          label: "新增居民数量",
        },

        {
          prop: "addContract",
          label: "新增签约数",
        },

        {
          prop: "addServe",
          label: "新增服务量",
        },

        {
          prop: "total",
          label: "合计",
        },
      ],

      // 表格数据
      tableData: [
        {
          dataType: "2021-01-04",
          addResident: 50,
          addContract: 77,
          addServe: 34,
          total: 100,
        },

        {
          dataType: "2021-01-05",
          addResident: 520,
          addContract: 77,
          addServe: 34,
          total: 100,
        },

        {
          dataType: "2016-05-01",
          addResident: 501,
          addContract: 77,
          addServe: 34,
          total: 100,
        },

        {
          dataType: "2016-05-03",
          addResident: 150,
          addContract: 77,
          addServe: 34,
          total: 100,
        },
      ],
    };
  },
  computed: {
    // 表格方法
    getHeaders() {
      return this.tableData.reduce(
        (pre, cur, index) => pre.concat(`value${index}`),

        ["title"]
      );
    },

    getValues() {
      return this.headers.map((item) => {
        return this.tableData.reduce(
          (pre, cur, index) =>
            Object.assign(pre, { ["value" + index]: cur[item.prop] }),

          { title: item.label }
        );
      });
    },
  },

  created() {},
  methods: {
    // 折线图方法
    drawLine(id) {
      this.charts = echarts.init(document.getElementById(id));
      this.charts.setOption({
        title: {
          text: "数据概况",
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["居民数量", "签约量", "服务量"], //图例
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },

        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          //横坐标
          //  name: "日期",
          type: "category",
          boundaryGap: false,
          data: this.xdata,
        },
        yAxis: {
          // name: "数量",
          type: "value",
        },
        //三条折线就有三种series，可以更改type以改变是否为折线
        series: [
          {
            color: "#2984f8",
            name: "居民数量",
            type: "line",
            data: this.adata,
          },
          {
            color: "#fa756c",
            name: "签约量",
            type: "line",
            data: this.bdata,
          },
          {
            color: "#3ed29c",
            name: "服务量",
            type: "line",
            data: this.cdata,
          },
        ],
      });
    },

    // 柱状图动态获取数据
    // histogram() {
    //   axios({
    //     url: "/api/histogram/getHistogram",
    //   }).then((res) => {
    //     console.log(res);
    //     this.yData = res.data.data;
    //   });
    // },

    // 柱状图方法
    initEcharts() {
      // 多列柱状图
      const mulColumnZZTData = {
        xAxis: {
          data: this.xData,
        },
        // 图例
        legend: {
          data: ["服务包使用情况"],
        },
        yAxis: {},
        series: [
          {
            color: "#2984f8",
            type: "bar", //形状为柱状图
            data: this.yData,
            barWidth: 10, //柱图宽度
            name: "服务包使用情况", // legend属性
            label: {
              // 柱状图上方文本标签，默认展示数值信息
              show: false,
              position: "top",
            },
          },
        ],
      };
      const myChart = echarts.init(document.getElementById("mychart"));
      myChart.setOption(mulColumnZZTData);
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },

    // 横向柱状图
    // transverseFigure() {
    //   // 多列柱状图
    //   const mulColumnZZTData = {
    //     xAxis: {
    //       type:"value",
    //       data: this.xData,
    //     },
    //     // 图例
    //     legend: {
    //       data: ["服务包使用情况"],
    //     },
    //     yAxis: {
    //       data: ['1号 60人完成','2号','3号','4号','5号','6号','7号'],
    //         type:"category",
    //     },
    //     series: [
    //       {
    //         color: "#2984f8",
    //         type: "bar", //形状为柱状图
    //         data: this.yData,
    //         barWidth: 10, //柱图宽度
    //         name: "服务包使用情况", // legend属性
    //         label: {
    //           // 柱状图上方文本标签，默认展示数值信息
    //           show: true,
    //           position: "top",
    //         },
    //       },
    //     ],
    //   };
    //   const mychart2 = echarts.init(document.getElementById("mychart2"));
    //   mychart2.setOption(mulColumnZZTData);
    //   //随着屏幕大小调节图表
    //   window.addEventListener("resize", () => {
    //     mychart2.resize();
    //   });
    // },
  },
  //调用
  mounted() {
    // 横向柱状图
    // this.transverseFigure();

    // 折线图
    this.$nextTick(function () {
      this.drawLine("main");
    });
    // 柱状图
    this.initEcharts();


  },
};
</script>

<style>
.verbar{
  width: 320px;
  height: 340px;
  margin-top: 5px;
  margin-left: 20px;
  background-color: white;
  border-radius: 6px;
  float: left;
}


.span_one {
  margin-left: 90px;
  margin-top: 20px;

  
}

#ecahrtIds {
  margin: 0 auto;
  text-align: center;
}
#ecahrtIdsTwo {
  margin: 0 auto;
  text-align: center;
}
#ecahrtIdsThree {
  margin: 0 auto;
  text-align: center;
}

.div-pie {
  float: left;
  /* padding-right: 10px; */
  margin-left: 25px;
  margin-right: 5px;
  margin-bottom: 35px;
  width: 30%;
  height: 400px;
  background-color: #ffffff;
  border-radius: 7px;
  border: 1px solid #e4e4e4;
}
.div-pie-right {
  float: left;
  /* padding-right: 10px; */
  margin-left: 25px;
  margin-right: 5px;
  margin-bottom: 35px;
  width: 63%;
  height: 400px;
  background-color: #ffffff;
  border-radius: 7px;
  border: 1px solid #e4e4e4;
}
#pie {
  border-radius: 7px;
  margin: 35px auto;
  width: 100%;
  height: 850px;
}
#exportData {
  float: right;
  margin-right: 10px;
  margin-bottom: 15px;
  padding: 6px 19px;
  border: 1px solid #e4e4e4;
  background-color: #ffffff;
  font-size: 15px;
  color: #333333;
  line-height: 26px;
  border-radius: 7px;
  cursor: pointer;
  text-align: center;
}
.myTable {
  border-collapse: collapse;
  margin: 0 auto;
  text-align: center;
}

.myTable td,
.myTable th {
  border: 1px solid #cad9ea;
  color: #666;
  height: 60px;
}
#app {
  height: 450px;
}
#bigbox {
  width: 100%;
  height: 1814px;
  background-color: #f2f7fb;
}
#big {
  margin: 10px auto;
  width: 90%;
  height: 1814px;
  background-color: #ffffff;
}
#nr-zhong {
  border-radius: 7px;
  border: 1px solid #e4e4e4;
  margin: 10px auto;
  width: 95%;
  height: 753px;
  background-color: #ffffff;
}
#nr-zhong span {
  padding-left: 25px;
}
#shuxian {
  color: blue;
  font-size: 16px;
  font-weight: 550;
  padding-left: 15px;
}
.status-1 {
  /* float: left; */
  margin-left: 30px;
  margin-top: 15px;
}
.sign-sp {
  margin-left: -13px;
  margin-right: 10px;
  font-weight: 400;
  font-style: normal;
  font-size: 13px;
  color: #999999;
}
</style>